<template>
	<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit" class="loginform">
		<FormItem prop="userName">
        <i class="iconfont icon-yonghu" style="display:inline-block"></i>
        <input placeholder="请输入用户名" v-model="form.userName">
        </input>
		</FormItem>
		<FormItem prop="password" >
			<!-- <Input size="large" prefix="md-lock" type="password" v-model="form.password" placeholder="请输入密码"> </Input> -->
      <i class="iconfont icon-mima" style="display:inline-block"></i>
      <input type="password" placeholder="请输入密码" v-model="form.password">
      </input>
		</FormItem>
		<FormItem>
			<Button @click="handleSubmit" style="background: #3A64FF;color:#fff;" long class="bnt">登录</Button>
		</FormItem>
	</Form>
</template>
<script>
import icons from '../icons/icons.vue'
export default {
  components: { icons },
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '密码不能为空', trigger: 'blur', style: 'margin-top:8px' }]
      }
    }
  },
  data () {
    return {
      form: {
        userName: '',
        password: ''
      }
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },

  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  input:focus {
    outline:none;
    border: none;
  }
  i {
    width: 18px;
    height: 18px;
  }
  input {
    border: none;
    width: auto;
    text-indent: 24px;
    width: 100%
  }
  .bnt >>> .ivu-btn-primary {
    background-color: #3A64FF;
  }
  .loginform >>> .ivu-form-item-content{
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }
</style>
